<template>
<!-- 在vue2中 template 有且只能有一个根元素 -->
  <div> 
    <h1>这是一个大大的1</h1> 
    <!-- 插值表达式 -->
    <!-- {{表达式}} -->
    <!-- 在data 中定义的数据可以直接在template中使用 -->

    <h2>我有{{money}}元，很有钱</h2>
    <!-- <h2>{{ fn() }}</h2> -->

    <!-- 不能使用语句 -->
    <!-- <h2>结果：{{ if (money === 100) {} }}</h2>//错的 -->

    <div>{{ obj.name}} -- {{ obj.age}}</div>
    {{obj.age >=19 ? '去洗jio' : '在家打游戏'}}
    {{ obj.dog.toUpperCase()}}

    <!-- 如果要使用变量 必须在data先声明 -->
    <!-- {{abc}}//先声明在使用 -->
    </div>
</template>

<script>
export default{
//vue 要求语法 在对象中可以写一些属性
//data 用于定义数据 必须得是一个函数
//函数返回值必须是一个对象 在对象中定义的属性就是vue数据
// data :function(){}
data (){
  return{
    money:20000,
    obj:{
      name:'小丽',
      age:20,
      dog:'66'
    }

  }
}

}
</script>



<style lang="less">
div{
  width: 200px;
  height: 200px;
  background-color:yellow;
  h1{
    font-size: 12px;
  }
}
</style>
